import { Content } from 'antd/es/layout/layout';
import { useSettings } from '@/store/settingStore';
import React, { type CSSProperties, forwardRef } from 'react';
import { Outlet } from 'react-router-dom';
import useWindowWidth from '@/hooks/event/use-window-width';
import FusionAllAgent from '@/pages/app-fusion/view/fusion-all-agent';
import FusionAllHistory from '@/pages/app-fusion/view/fusion-all-history';
import { GetWorkBenhList, historicalDialogueType, MenuContentType } from '@/common';
import { useOrchestrationStore } from '@/store/orchestrationStore';

interface MainProps {
  contentTypeFun: () => JSX.Element;
  onChangeCollect: () => void;
  onGetFusionCollect?: (data: GetWorkBenhList) => void;
  isDeleteCollect: boolean;
  isSearch?: string | null;
  contentType?: MenuContentType;

  handleChatItemClick: (data: historicalDialogueType) => void;
  deleteHistoryDialogue?: (event: any, data: historicalDialogueType) => void;
  isDeleteChatHistory?: boolean;
  dataId?: string[];
  isLoadingHistory?: boolean;
}

export default function Main({
  contentTypeFun,

  onChangeCollect,
  onGetFusionCollect,
  isDeleteCollect,
  isSearch = null,
  contentType,

  handleChatItemClick,
  deleteHistoryDialogue,
  isDeleteChatHistory,
  dataId,
  isLoadingHistory,
}: MainProps) {
  const { showKeyAgent, showkeyHistory } = useOrchestrationStore();
  const { isPc } = useWindowWidth();
  const { themeStretch, themeLayout, multiTab } = useSettings();
  const mainStyle: CSSProperties = {
    width: '100%',
    borderRadius: '0px',
    padding: '0px',
  };
  return (
    <div>
      <Content
        style={mainStyle}
        className={`flex h-screen ${isPc && showKeyAgent ? 'pl-4' : ''} ${
          isPc && showkeyHistory ? 'pr-4' : ''
        } `}
      >
        {/* {isPc && showKeyAgent && (
          <FusionAllAgent
            onGetFusionCollect={onGetFusionCollect}
            onChangeCollect={onChangeCollect}
            isDeleteCollect={isDeleteCollect}
            isSearch={isSearch}
            contentType={contentType}
          />
        )} */}

        {showKeyAgent &&
          (isPc ? (
            <FusionAllAgent
              onGetFusionCollect={onGetFusionCollect}
              onChangeCollect={onChangeCollect}
              isDeleteCollect={isDeleteCollect}
              isSearch={isSearch}
              contentType={contentType}
            />
          ) : (
            <div className="fixed z-[9999] h-full w-full">
              <FusionAllAgent
                onGetFusionCollect={onGetFusionCollect}
                onChangeCollect={onChangeCollect}
                isDeleteCollect={isDeleteCollect}
                isSearch={isSearch}
                contentType={contentType}
              />
            </div>
          ))}

        <div className={`size-full flex-grow overflow-auto ${isPc ? 'mt-2 ' : ''} `}>
          <div
            className={`m-auto size-full flex-grow flex-row ${
              themeStretch ? '' : 'xl:max-w-screen-xl'
            }`}
          >
            {contentTypeFun()}
          </div>
        </div>
        {isPc && showkeyHistory && (
          <FusionAllHistory
            onChangeChatItem={handleChatItemClick}
            isDeleteChatHistory={isDeleteChatHistory}
            dataId={dataId}
            deleteHistoryDialogue={deleteHistoryDialogue}
            isSearch={isSearch}
            isLoadingHistory={isLoadingHistory}
          />
        )}
      </Content>
    </div>
  );
}
